<template>
  <el-card class="app-container" shadow="always">
    <div slot="header">
      <span>编辑vip类型</span>
    </div>
    <el-form ref="form1" :model="form1" :rules="rules2" label-width="120px">
      <el-form-item
        prop="viplevel"
        label="vip等级">
        <el-input v-model="form1.viplevel" placeholder="请输入vip等级"/>
      </el-form-item>
      <el-form-item
        label="折扣"
        prop="discount"
      >
        <el-input v-model="form1.discount"  placeholder="请输入折扣"/>
      </el-form-item>
      <el-form-item
        label="到达金额"
        prop="tomoney"
      >
        <el-input v-model="form1.tomoney" placeholder="请输入到达金额"/>
      </el-form-item>
      <el-form-item
        label="说明"
        prop="intro"
      >
        <el-input type="textarea" v-model.number="form1.intro" placeholder="请输入说明"/>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="onSubmit()">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import {update,findById} from '@/api/viplevel';
import ElCard from "element-ui/packages/card/src/main";
export default {
  components: {ElCard},
  data() {
    return {
      form1: {
        id: null,
        viplevel: null,
        discount: null,
        tomoney: null,
        intro: null,
      },
      loading: false,
      rules2: {
        viplevel: [
          { required: true, message: '不能为空' }
        ],
        discount: [
          { required: true, message: '不能为空' }
        ],
        intro: [
          { required: true, message: '不能为空' }
        ],
        tomoney: [
          { required: true, message: '不能为空' }
        ]
      }
    }
  },
  created() {
    this.form1.id = this.$route.params.id
    findById(this.form1.id).then(res=>{
      this.form1 = res.data
    })
  },
  methods: {
    onSubmit() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          this.loading = true
          update(this.form1).then(response => {
              const res =response;
            if (res.code === 1000) {
              this.$message({
                message: '提交成功！',
                type: 'success'
              })
              this.loading = false
              setTimeout(this.onCancel(), 20000)
            } else {
              this.showError(res.message)
              this.loading = false
            }
          }).catch(error => {
            this.loading = false
            this.showError(error)
          })
        } else {
          this.loading = false
          return false
        }
      })
    },
    showError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      })
    },
    onCancel() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
  .line{
    text-align: center;
  }
</style>
